// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
import echarts from 'echarts'
const staticOption = {
  baseOption: {
    timeline: {
      axisType: 'category',
      autoPlay: '',
      playInterval: '',
      bottom: '7%',
      symbol: 'emptyCircle',
      symbolSize: 15,
      data: [],
      lineStyle: {
        color: '#bad3ff'
      },
      label: {
        color: '#bad3ff',
        fontSize: 24,
        padding: [0, 0, -30, 0],
        interval: 0
      },
      checkpointStyle: {
        color: '#00fffc',
        symbolSize: 20,
        borderWidth: 15,
        borderColor: 'rgba(0, 255, 252, 0.3)'
      },
      controlStyle: {
        color: '#bad3ff',
        borderColor: '#bad3ff',
        itemSize: 36,
        showPlayBtn: false,
        itemGap: 70
      },
      emphasis: {
        controlStyle: {
          borderColor: '#d6e1ff'
        },
        label: {
          color: '#bad3ff',
          fontSize: 24,
          padding: [0, 0, -30, 0]
        },
        itemStyle: {
          color: '#bad3ff'
        }
      }
    },
    color: ['#f94d64', '#00afff'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        // 渐变色没有默认marker.需要自行添加
        return `${params[0].name}<br />
              <span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;
              background-color:#00afff;'></span> ${params[0].seriesName} : ${Math.abs(params[0].value)} <br />
              <span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;
              background-color:#f94d64;'></span> ${params[1].seriesName} : ${Math.abs(params[1].value)}`
      }
    },
    legend: {
      top: '6%',
      data: ['成功', '失败'],
      textStyle: {
        color: '#d9e7ff',
        fontSize: 24
      },
      itemWidth: 20,
      itemHeight: 6
    },
    grid: {
      left: '7%',
      right: '7%',
      bottom: '16%',
      top: '12%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#4876c7'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#4876c7'
          }
        },
        axisLabel: {
          fontSize: 22,
          color: '#94aad4',
          formatter: function (value) {
            return Math.abs(value)
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        offset: 40,
        axisTick: {show: false},
        axisLine: {
          lineStyle: {
            color: '#05388f'
          }
        },
        axisLabel: {
          color: '#94aad4',
          fontSize: 22
        },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ]
  },
  options: [
    {
      series: [
        {
          name: '成功',
          type: 'bar',
          stack: '总量',
          barMaxWidth: '30%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              // 0% 处的颜色
              offset: 0,
              color: '#007aff'
            }, {
              // 100% 处的颜色
              offset: 1,
              color: '#00afff'
            }
            ], false)
          },
          label: {
            normal: {
              show: true,
              color: '#00afff',
              position: 'left',
              fontSize: 24,
              formatter: function (params) {
                return Math.abs(params.data)
              }
            }
          },
          data: [-4, -5, -7, -80, -5, -8, -9]
        },
        {
          name: '失败',
          type: 'bar',
          stack: '总量',
          barMaxWidth: '30%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              // 0% 处的颜色
              offset: 0,
              color: '#fc899d'
            }, {
              // 100% 处的颜色
              offset: 1,
              color: '#f94d64'
            }
            ], false)
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              color: '#f94d64',
              fontSize: 24,
              formatter: function (params) {
                return Math.abs(params.data)
              }
            }
          },
          data: [4, 7, 8, 90, 4, 1, 5]
        }
      ]
    },
    {
      series: [
        {
          name: '成功',
          type: 'bar',
          stack: '总量',
          barMaxWidth: '30%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              // 0% 处的颜色
              offset: 0,
              color: '#007aff'
            }, {
              // 100% 处的颜色
              offset: 1,
              color: '#00afff'
            }
            ], false)
          },
          label: {
            normal: {
              show: true,
              color: '#007aff',
              position: 'left',
              fontSize: 24,
              formatter: function (params) {
                return Math.abs(params.data)
              }
            }
          },
          data: [-5, -7, -8, -9, -7, -8, -2]
        },
        {
          name: '失败',
          type: 'bar',
          stack: '总量',
          barMaxWidth: '30%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              // 0% 处的颜色
              offset: 0,
              color: '#fc899d'
            }, {
              // 100% 处的颜色
              offset: 1,
              color: '#f94d64'
            }
            ], false)
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              color: '#f94d64',
              fontSize: 24,
              formatter: function (params) {
                return Math.abs(params.data)
              }
            }
          },
          data: [1, 2, 6, 4, 7, 8, 9]
        }
      ]
    }
  ]
}

const staticOptionMid = {
  baseOption: {
    timeline: {
      axisType: 'category',
      autoPlay: '',
      playInterval: '',
      bottom: '5%',
      symbol: 'emptyCircle',
      symbolSize: 10,
      data: [],
      lineStyle: {
        color: '#bad3ff'
      },
      label: {
        color: '#bad3ff',
        fontSize: 16,
        padding: [0, 0, -30, 0],
        interval: 0
      },
      checkpointStyle: {
        color: '#00fffc',
        symbolSize: 15,
        borderWidth: 10,
        borderColor: 'rgba(0, 255, 252, 0.3)'
      },
      controlStyle: {
        color: '#bad3ff',
        borderColor: '#bad3ff',
        itemSize: 24,
        showPlayBtn: false,
        itemGap: 70
      },
      emphasis: {
        controlStyle: {
          borderColor: '#d6e1ff'
        },
        label: {
          color: '#bad3ff',
          fontSize: 18,
          padding: [0, 0, -30, 0]
        },
        itemStyle: {
          color: '#bad3ff'
        }
      }
    },
    color: ['#f94d64', '#00afff'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        // 渐变色没有默认marker.需要自行添加
        return `${params[0].name}<br />
              <span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;
              background-color:#00afff;'></span> ${params[0].seriesName} : ${Math.abs(params[0].value)} <br />
              <span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;
              background-color:#f94d64;'></span> ${params[1].seriesName} : ${Math.abs(params[1].value)}`
      }
    },
    legend: {
      top: '6%',
      data: ['成功', '失败'],
      textStyle: {
        color: '#d9e7ff',
        fontSize: 18
      },
      itemWidth: 20,
      itemHeight: 6
    },
    grid: {
      left: '7%',
      right: '7%',
      bottom: '16%',
      top: '12%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#4876c7'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#4876c7'
          }
        },
        axisLabel: {
          fontSize: 18,
          color: '#94aad4',
          formatter: function (value) {
            return Math.abs(value)
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        offset: 30,
        axisTick: {show: false},
        axisLine: {
          lineStyle: {
            color: '#05388f'
          }
        },
        axisLabel: {
          color: '#94aad4',
          fontSize: 18
        },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ]
  },
  options: [
    {
      series: [
        {
          name: '成功',
          type: 'bar',
          stack: '总量',
          barMaxWidth: '30%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              // 0% 处的颜色
              offset: 0,
              color: '#007aff'
            }, {
              // 100% 处的颜色
              offset: 1,
              color: '#00afff'
            }
            ], false)
          },
          label: {
            normal: {
              show: true,
              color: '#00afff',
              position: 'left',
              fontSize: 18,
              formatter: function (params) {
                return Math.abs(params.data)
              }
            }
          },
          data: [-4, -5, -7, -80, -5, -8, -9]
        },
        {
          name: '失败',
          type: 'bar',
          stack: '总量',
          barMaxWidth: '30%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              // 0% 处的颜色
              offset: 0,
              color: '#fc899d'
            }, {
              // 100% 处的颜色
              offset: 1,
              color: '#f94d64'
            }
            ], false)
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              color: '#f94d64',
              fontSize: 18,
              formatter: function (params) {
                return Math.abs(params.data)
              }
            }
          },
          data: [4, 7, 8, 90, 4, 1, 5]
        }
      ]
    },
    {
      series: [
        {
          name: '成功',
          type: 'bar',
          stack: '总量',
          barMaxWidth: '30%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              // 0% 处的颜色
              offset: 0,
              color: '#007aff'
            }, {
              // 100% 处的颜色
              offset: 1,
              color: '#00afff'
            }
            ], false)
          },
          label: {
            normal: {
              show: true,
              color: '#007aff',
              position: 'left',
              fontSize: 24,
              formatter: function (params) {
                return Math.abs(params.data)
              }
            }
          },
          data: [-5, -7, -8, -9, -7, -8, -2]
        },
        {
          name: '失败',
          type: 'bar',
          stack: '总量',
          barMaxWidth: '30%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              // 0% 处的颜色
              offset: 0,
              color: '#fc899d'
            }, {
              // 100% 处的颜色
              offset: 1,
              color: '#f94d64'
            }
            ], false)
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              color: '#f94d64',
              fontSize: 24,
              formatter: function (params) {
                return Math.abs(params.data)
              }
            }
          },
          data: [1, 2, 6, 4, 7, 8, 9]
        }
      ]
    }
  ]
}

// 备选颜色，有需求则进行循环

// const colors = ['#fe6e80', '#ffa286', '#ffdd89', '#a7eb87', '#2bd3bd', '#0099ff', '#7574ee']
// let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // colorIndex = 0
    // // 装配数据 必须使用箭头函数
    // this.option.series[0].data = additionalOptions.recentData
    // this.option.series[1].data = additionalOptions.totalData
    this.option.baseOption.timeline.autoPlay = additionalOptions.autoPlay
    this.option.baseOption.timeline.playInterval = additionalOptions.playInterval
    // this.option.baseOption.timeline.data = additionalOptions.timelineData
    additionalOptions.timelineData.forEach((p1) => {
      this.option.baseOption.timeline.data.push({
        value: p1,
        tooltip: {
          formatter: '{b}'
        }
      })
    })
    this.option.options[0].series[0].data = additionalOptions.seriesData[0].successData
    this.option.options[0].series[1].data = additionalOptions.seriesData[0].failData
    this.option.options[1].series[0].data = additionalOptions.seriesData[1].successData
    this.option.options[1].series[1].data = additionalOptions.seriesData[1].failData
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.baseOption.timeline.data = []
    this.option.options[0].series[0].data = []
    this.option.options[0].series[1].data = []
    this.option.options[1].series[0].data = []
    this.option.options[1].series[1].data = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
